<template>
	<view>
		<cu-custom :bgImage="bgImg" :isBack="true">
			<view slot="content">积分记录</view>
		</cu-custom>
		<view class="mypet-center mt10" v-if="historyList.length >0">
			<u-swipe-action class="pet-profile" v-for="(item,index) in historyList" :key="item._id" :index="index">
				<view class="padding flex align-center justify-between">
					<view class="text-sm">{{item.create_time | formatDate('YYYY-MM-DD HH:MM:SS') }}</view>
					<view>
						<text v-if="item.num<0" class="text-red">{{item.num}}</text>
						<text v-else class="text-green">+{{item.num}}</text>
					</view>
					<view class="text-sm" style="width: 150rpx;">{{item.remark}}</view>
				</view>
				<u-line></u-line>
			</u-swipe-action>
			<view class="bg-primary white save-btn row-center lg" @click="showPay=true">充值积分</view>
		</view>
		<view v-else class="mypet-center mt10">
			<u-empty></u-empty>
			<view class="bg-primary white save-btn row-center lg" @click="showPay=true">充值积分</view>
		</view>
		<u-popup v-model="showPay" mode="bottom" border-radius="14" :mask-close-able="false" :closeable="true">
			<view class="margin" style="margin-top: 80rpx;">
				<view class="column-center">
					<view class="row-center">
						<text>我的积分:</text>
						<text class="text-green text-xxl margin-left-sm">{{userInfo.integral}}</text>
					</view>
				</view>
				<view class="row-between bg-cyan light radius padding-left padding-right padding-top-xs padding-bottom margin-top-sm" v-if="false">
					<view style="line-height: 60rpx;">
						<view class="text-lg">免费获取次数(0/5)</view>
						<view>每次分享可获得50次识别次数</view>
					</view>
					<u-button shape="circle" size="medium" open-type="share">分享</u-button>
				</view>
		
				<view class="bg-cyan light radius padding-left padding-right padding-top-xs padding-bottom margin-top-sm">
					<view class="row-between">
						<view class="text-lg">充值购买积分</view>
						<view class="row" @tap="goRecordr">
							<view class="text-gray">充值记录</view>
							<u-icon color="#aaaaaa" name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="row-around margin-top-sm">
						<view class="column-center radius  padding" :class="item._id==selectOrder._id ? 'light bg-green' : 'bg-white'" v-for="item in order" :key="item._id" @tap="changeOrder(item)">
							<text class="text-grey text-lg text-bold">{{item.integral}}积分</text>
							<text class="text-gray margin-top-sm">售价{{item.price}}元</text>
							<!-- <text class="text-gray">{{item.original_price}}元</text> -->
						</view>
					</view>
				</view>
				<view class="row-between bg-cyan light radius padding margin-top-sm margin-bottom padding-bottom">
					<view class="row-center">
						<text>需支付:</text>
						<text class="text-red padding-left-xs text-lg">{{selectOrder.price}}元</text>
					</view>
					<u-button shape="circle" size="medium" @click="toPay()">立即支付</u-button>
				</view>
				<view style="height: 60rpx;"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				bgImg: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/customBg.jpg',
				historyList: [],
				showPay: false,
				order: [],
				selectOrder: { _id: 0, price: 0 }
			};
		},
		onLoad() {
			this.getHistory();
		},
		onShow() {
			this.getUser()
			this.getOrder()
		},
		methods: {
			...mapActions(['getUser']),
			async getHistory() {
				try {
					const { result: { code, msg, data } } = await wx.cloud.callFunction({ name: 'user', data: { $url: 'integralHistory' } });
					if (code == 200) {
						this.historyList = data;
					} else {
						this.historyList = [];
					}
				} catch (error) {
					console.error('Error calling cloud function:', error);
					this.historyList = [];
				}
			},
			async getOrder() {
				const { result: { code, message, data } } = await wx.cloud.callFunction({ name: 'user', data: { $url: 'getOrder' } })
				if (code == 200) {
					this.order = data
				} else {
					this.order = []
				}
			},
			changeOrder(item) {
				this.selectOrder = item
			},
			async toPay() {
				if (this.selectOrder._id == 0) {
					this.$toast({
						title: "请选择充值选项"
					});
					return;
				}
				try {
					const { result: { code, message, data } } = await wx.cloud.callFunction({
						name: 'pay',
						data: { $url: 'getPaymentParams', orderId: this.selectOrder._id }
					});
			
					if (code == 0) {
						wx.requestPayment({
							...data,
							success: (res) => {
								console.log('pay success', res);
								setTimeout(() => {
									this.getUser();
									this.showPay = false;
								}, 1500);
							},
							fail: (err) => {
								console.error('pay fail', err);
								this.$toast({
									title: "支付失败",
									icon: "none"
								});
							}
						});
					} else {
						console.log("预支付失败");
						this.$toast({
							title: "预支付失败",
							icon: "none"
						});
					}
				} catch (error) {
					console.error("调用云函数出错", error);
					this.$toast({
						title: "系统错误，请稍后再试",
						icon: "none"
					});
				}
			},
			
			goRecordr() {
				uni.navigateTo({
					url: '/pages_subpackage/rechargeRecord/rechargeRecord'
				})
			}
		},
		computed: {
			...mapGetters(['userInfo', 'isLogin'])
		}
	}
</script>

<style lang="scss">
	.mypet-center {
		.pet-profile {
			.pet-avatar-box {
				padding: 30rpx 20rpx;
				background-color: white;
			}
			.row-info {
				padding: 30rpx 20rpx;
				background-color: white;

				.label {
					width: 180rpx;
				}
			}

			.bdb-line {
				border-bottom: 1rpx solid #e5e5e5;
			}
		}

		.save-btn {
			margin-top: 40rpx;
			height: 88rpx;
			margin-left: 54rpx;
			margin-right: 54rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}

	.text-name {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 240rpx;
	}
</style>